<script>
import logo from '@/assets/cbjq.png'
import { Fold, Expand } from '@element-plus/icons-vue'
import AsiderCom from '@/components/AsiderCom.vue'
export default {

    data() {
        return {
            // logo图片
            logoUrl: logo,
            // 折叠状态
            collapse: false,
            // 折叠图标
            collapseIcon: 'Fold',
            width: '200px'
        }
    },
    watch: {
        collapse(newone, oldone) {
            if (newone) {
                this.collapseIcon = 'Expand'
                this.width = '64px'
            } else {
                this.collapseIcon = 'Fold'
                this.width = '200px'
            }
        }
    },
    components: { Fold, Expand, AsiderCom },
    methods: {
        loginClick() {
            // 跳转到登录页面 路由跳转方法this.$router
            this.$router.push('/login')
        },
        logoutClick() {
            // 退出登录
            // 删除用户信息
            this.$store.commit('updateUserInfo', {})
            this.$router.push('/login')

        }
    }
}
</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-aside :width="width">
                <div class="logoHeader">
                    <el-image :src="logoUrl" style="width: 32px;height: 32px;"></el-image>
                    <h4 v-if="!collapse">电商后台管理系统</h4>
                </div>
                <!-- 侧边栏 -->
                <AsiderCom :collapse="collapse"></AsiderCom>
            </el-aside>
            <el-container>
                <el-header>
                    <el-icon size=30px @click="collapse = !collapse">
                        <component :is="collapseIcon"></component>
                    </el-icon>
                    <!-- if else方式实现折叠 -->
                    <!-- <el-icon v-if="!collapse" @click="collapse = !collapse" size=30px>
                        <Fold />
                    </el-icon>
                    <el-icon v-else @click="collapse = !collapse" size=30px>
                        <Expand />
                    </el-icon> -->
                    <div style=" display: flex;justify-content: center;align-items: center;">
                        <p v-if="$store.state.userInfo">
                            <span style="margin-right: 10px;">欢迎{{ $store.state.userInfo.adminname }}</span>
                            <el-button type="primary" @click="logoutClick">退出</el-button>
                        </p>
                        <el-button v-else type="success" @click="loginClick">登录</el-button>
                    </div>
                </el-header>
                <el-main>
                    <!-- 二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<!-- 设置当前样式使用的是scss -->
<!-- scoped 样式只对当前组件有效 -->
<style lang='scss'>
html,
body,
#app,
.common-layout,
.el-container {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.el-aside {
    background-color: #6cf;
}

.el-header {
    background-color: rgb(126, 187, 196);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.el-main {
    background-color: rgb(191, 140, 161);

}

.logoHeader {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}
</style>